<template>
	<view class="container">
		<view class="top-title">
			评论({{showData.count || 0}})
		</view>
		<!-- 评论列表 -->
		<view class="comment-list" v-if="showData.count != 0"
		v-for="(item,index) in showData.data" :key="index">
			<view class="comment-nape" >
				<view class="nape-top">
					<view class="head-pic">
						<image :src="item.avatar" mode="scaleToFill"></image>
					</view>
					<view class="user-info">
						<view class="nickname">{{item.nickname}}</view>
						<view class="public-time">
							{{item.time}}
						</view>
						<view class="content">
							{{item.content}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--无评论提示-->
		<view v-if="showData.count == 0"><text class="prompt">当前暂无评论~</text></view>
	</view>
</template>

<script>
	export default {
		props:['showData'],
		data() {
			return {
		
			}
		},
		methods: {},
	}
</script>

<style lang="scss">
	page {}

	.container {
		padding: 0 26rpx;

		.top-title {
			margin-bottom: 24rpx;
			font-size: 32rpx;
			line-height: 44rpx;
			color: #000000;
		}

		.comment-list {
			.comment-nape {
				padding: 20rpx;
				padding-right: 36rpx;
				margin-bottom: 24rpx;
				background: #F6F7FB;
				border-radius: 5px;
				
				&:last-child{
					margin-bottom: 0;
				}

				.nape-top {
					display: flex;

					.head-pic {
						overflow: hidden;
						width: 80rpx;
						height: 80rpx;
						margin-right: 20rpx;
						border-radius: 50%;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.user-info {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						padding: 5rpx 0;

						.nickname {
							font-size: 28rpx;
							line-height: 28rpx;
							color: #000000;
						}

						.public-time {
							padding: 16rpx 0;
							font-size: 24rpx;
							line-height: 24rpx;
							color: #999999;
						}

						.content {
							font-size: 28rpx;
							line-height: 48rpx;
							color: #666666;
						}
					}

				}
			}
		}
		.prompt{
			margin-top: 310rpx;
			margin-left: 220rpx;
		}
	}
</style>
